<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <style type="text/css">
        .custom-combobox {
            position: relative;
            display: inline-block;
        }

        .custom-combobox-toggle {
            position: absolute;
            top: 0;
            bottom: 0;
            margin-left: -1px;
            padding: 0;
            *height: 1.7em;
            *top: 0.1em;
        }

        .custom-combobox-input {
            margin: 0;
            padding: 0.3em;
        }

    </style>
    <link rel="stylesheet" type="text/css"
          href="css/jquery/combobox/jquery-ui.min-1.10.4.css"/>
    <script type="text/javascript" src="js/jquery/combobox/jquery.min-1.10.2.js"></script>
    <script type="text/javascript" src="js/jquery/combobox/jquery-ui.min-1.10.4.js"></script>
    <link rel="stylesheet" href="/demo/jqueryui/style.css">
</head>
<script type="text/javascript">
    $(function () {
// 	$.ajax({
// 		url : "reg-declaraCompany",
// 		dateType : "json",
// 		type : "post",
// 		success : function(data) {
// 			var optionstring = "";
// 			for(var i=0; i<(data.results).length; i++) {
// 				optionstring += "<option value=\"" + data.results[i][1] + "\" >" + data.results[i][0] + "</option>";
// 			}
// 			$("#combobox").html(optionstring);
// 		}
// 	});
    });
    (function ($) {
        $.widget("custom.combobox", {
            _create: function () {
                this.wrapper = $("<span>")
                        .addClass("custom-combobox")
                        .insertAfter(this.element);

                this.element.hide();
                this._createAutocomplete();
                this._createShowAllButton();
            },

            _createAutocomplete: function () {
                var selected = this.element.children(":selected"),
                        value = selected.val() ? selected.text() : "";

                this.input = $("<input>")
                        .appendTo(this.wrapper)
                        .val(value)
                        .attr("title", "")
                        .attr("id", "onlySelect")
                        .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
                        .autocomplete({
                            delay: 0,
                            minLength: 0,
                            source: $.proxy(this, "_source")
                        })
                        .tooltip({
                            tooltipClass: "ui-state-highlight"
                        });

                this._on(this.input, {
                    autocompleteselect: function (event, ui) {
                        ui.item.option.selected = true;
                        this._trigger("select", event, {
                            item: ui.item.option
                        });
                    },

                    autocompletechange: "_removeIfInvalid"
                });
            },

            _createShowAllButton: function () {
                var input = this.input,
                        wasOpen = false;

                $("<a>")
                        .attr("tabIndex", -1)
                        .attr("title", "Show All Items")
                        .tooltip()
                        .appendTo(this.wrapper)
                        .button({
                            icons: {
                                primary: "ui-icon-triangle-1-s"
                            },
                            text: false
                        })
                        .removeClass("ui-corner-all")
                        .addClass("custom-combobox-toggle ui-corner-right")
                        .mousedown(function () {
                            wasOpen = input.autocomplete("widget").is(":visible");
                        })
                        .click(function () {
                            input.focus();

                            // 如果已经可见则关闭
                            if (wasOpen) {
                                return;
                            }

                            // 传递空字符串作为搜索的值，显示所有的结果
                            input.autocomplete("search", "");
                        });
            },

            _source: function (request, response) {
                var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                response(this.element.children("option").map(function () {
                    var text = $(this).text();
                    if (this.value && ( !request.term || matcher.test(text) ))
                        return {
                            label: text,
                            value: text,
                            option: this
                        };
                }));
            },

            _removeIfInvalid: function (event, ui) {

                // 选择一项，不执行其他动作
                if (ui.item) {
                    return;
                }

                // 搜索一个匹配（不区分大小写）
                var value = this.input.val(),
                        valueLowerCase = value.toLowerCase(),
                        valid = false;
                this.element.children("option").each(function () {
                    if ($(this).text().toLowerCase() === valueLowerCase) {
                        this.selected = valid = true;
                        return false;
                    }
                });

                // 找到一个匹配，不执行其他动作
                if (valid) {
                    return;
                }

                // 移除无效的值
                this.input
                        .val("")
                        .attr("title", value + " didn't match any item")
                        .tooltip("open");
                this.element.val("");
                this._delay(function () {
                    this.input.tooltip("close").attr("title", "");
                }, 2500);
                this.input.data("ui-autocomplete").term = "";
            },

            _destroy: function () {
                this.wrapper.remove();
                this.element.show();
            }
        });
    })(jQuery);

    $(function () {
        $("#combobox").combobox();
        $("#toggle").click(function () {
            $("#combobox").toggle();
        });
    });

</script>

<body>
<div class="ui-widget">
    <p>
        输入关键字自动完成，如果首次输入中文没触发匹配可以继续输入，或者输入一个空格接着backspace删除即可触发。
        双击输入框即可全部选择，方便替换输入
    </p>
    <br/>
    <select id="combobox">
    </select>

    <input type="button" id="showSel" value="显示select" onclick="javascript:$('#s3').show();"/>
</div>

</body>
</html>
